<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-family: 'Nunito', sans-serif;
            height: 100%;
        }
        body {
            margin: 0px;
            height: 100%;
        }

        /*        .header{
                    top: 0;
                    height: 55px;
                    width: 100%;
                    position: absolute;
                    left: 0;
                    background: #000000;
                }*/
        /*
        .footer{
            bottom: 0;
            height: 50px;
            width: 100%;
            position: absolute;
            left: 0;
            background: #000000;
        }*/
        .side-menu{
            width: 200px;
            background: #32325d;
            /*top: 55px;*/
            top: 0;
            bottom: 0;
            overflow: auto;
            position: absolute;
            left: 0;
            overflow-x: hidden;
        }
        .main{
            left: 200px;
            right: 0;
            /*top: 55px;*/
            top: 0;
            bottom: 0;
            /*overflow: auto;*/
            position: absolute;
            /*background: green;*/
            overflow: hidden;
        }
        .main-menu{
            left: 0;
            top: 0;
            height: 45px;
            width: 100%;
            position: absolute;
            /*height: 45px;*/
            padding: 10px 0px 0px 10px;
            background: #6772e5;
            color: #e1e2fa;
            /*background: #000000;*/
        }
        .main-content{
            left: 0px;
            right: 0;
            /*top: 55px;*/
            top: 55px;
            bottom: 0;
            position: absolute;
            /*background: blue;*/
            overflow: hidden;
            /*background: #f6f9fc;*/
            /*height:auto;*/
            /*margin-bottom: -5000px; !* any large number will do *!*/
            /*padding-bottom: 5000px;*/
            /*margin-left: 250px;*/
        }

        .logo {
            background: #3a3a63;
            color: #ffffff;
            font-size: 24px;
            font-weight: bold;
            padding: 10px 0px 0px 10px;
            height: 45px;
        }
        a {
            text-decoration: none;
            color: #e1e2fa;
        }
        .menu{
            /*width: 200px;*/
        }
        .menu ul {
            list-style-type: none;
            margin-left: 0px;
            padding-left: 10px;
        }
        .menu ul li a {
            font-size: 12px;
            font-weight: 800;
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            margin-left: -5px;
            padding-left: 10px;
        }
        .menu ul li a:hover {
            background: #262646;
            border-left: solid 5px #6a75eb;
            margin-left: -10px;
            width: 98%;
        }



        /*.menu ul li ul {*/
        /*padding-left:0px;*/
        /*}*/
    </style>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="header">

</div>
<div class="content">
    <div class="side-menu">
        <div class="logo">配置中心</div>
        <div class="menu">
            <ul>
                <li><a href="#"><i class="fa fa-bar-chart" aria-hidden="true" style="display: none;"></i><span class="text" style="">平台</span></a></li>
                <li><a href="#"><i class="fa fa-arrows-alt" aria-hidden="true" style="display: none;"></i><span class="text" style="">应用模块</span></a></li>
                <li><a href="#"><i class="fa fa-desktop" aria-hidden="true" style="display: none;"></i><span class="text" style="">环境</span></a></li>
                <li><a href="#"><i class="fa fa-calendar" aria-hidden="true" style="display: none;"></i><span class="text" style="">哈哈</span></a></li>
                <li><a href="#"><i class="fa fa-mobile" aria-hidden="true" style="display: none;"></i><span class="text" style="">测试</span></a></li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="main-menu">
            <a href="#" id="showmenu"><i class="fa fa-bars" aria-hidden="true"></i></a>
        </div>
        <div class="main-content">
            <iframe id="mainFrame" frameborder="0" style="margin: 0; padding: 0; width: 100%; height: 100%; border-style: none;"
            <!--<iframe id="orderBody" frameborder="0" src="" style="margin: 0; padding: 0; display: none; width: 100%; height: 100%; border-style: none;"-->
                    <!--scrolling="no"></iframe>-->
            ></iframe>
        </div>
    </div>
</div>
<!--<div class="footer"></div>-->



<script src="../scripts/jquery/2.1.3/jquery.js"></script>
<script>$(function(){
    $(".menu i").hide();
    $("#showmenu").click(function(){
        if($(".side-menu").width() > "60"){
            $(".side-menu").animate({width: '-=205px'});
            $(".main-section").animate({'margin-left': '-=205px'});
            $(".logo").text("C");
            $("span.text").hide();
            $(".menu i").show();

        }
        else {
            $(".side-menu").animate({width: '+=205px'});
            $(".main-section").animate({'margin-left': '+=205px'});
            $(".logo").text("配置中心");
            $("span.text").show("slow");
            $(".menu i").hide();
        }
    });

    $(".menu li").click(function(){
        console.log("hsh");
        $("#mainFrame").attr("src", "https://www.baidu.com");
    });

});
</script>

</body>
</html>